<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: liuyunlong
 * @LastEditTime: 2022-01-08 09:36:53
-->
<template>
  <!--1. 容器 -->
  <div ref="left1_container" id="container" style="height: 95%"></div>
</template>
<script>
// 引入折线图构造函数
import { Line } from "@antv/g2plot";
import { get } from "../../../utils/request";
import moment from "moment";
import {mapState} from "vuex"
export default {
  watch: {
    ed: {
      handler() {
        //this.device_id=ed.device_id;
        // this.initData();
      },
      deep: true,
    },
  },
  //计算属性
  computed: {
    ...mapState(["ed"]),
  },
  data() {
    return {
      dataArr: [],
      devices: [],
      device_id: 1,
    };
  },
  created() {},
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      get("/dashboard/pageQueryTodayData", {
        page: 1,
        pageSize: 5,
        device_id: this.device_id,
      }).then((res) => {
        console.log(res);
        res.data.list.forEach((item) => {
          item.dateTime = moment(item.insert_time).format("hh:mm");
        });
        this.dataArr = res.data.list;
        this.initChart();
      });
    },
    initChart() {
      // 创建一个折线图对象
      const line = new Line(this.$refs.left1_container, {
        data: this.dataArr,
        xField: "dateTime",
        yField: "temperature",
      });
      // 渲染图像
      line.render();
    },
  },
};
</script>

<style scoped>
</style>